<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>login</title>
    <style>
        html, body, header, section, footer, div, ul, ol, li, img, a, span, em, del, legend, center, strong, var, fieldset, form, label, dl, dt, dd, cite, input, hr, time, mark, code, figcaption, figure, textarea, h1, h2, h3, h4, h5, h6, p {
            margin: 0;
            border: 0;
            padding: 0;
            font-style: normal;
        }

        button {
            outline: none;
        }

        input {
            border: 0;
            outline: none;
            position: absolute;
            left: 4rem;
            background-color: transparent;
        }

        button, input, select, textarea {
            font: inherit;
            color: inherit;
        }

        body {
            padding-top: 1rem;
            width: 100% ;
            background-color: #ffffff;
        }

        .init {
            font-size: 20px;
        }

        .top {
            height: 2.2rem;
            width: 100%;
        }

        .goreturn {
            transform: rotate(180deg);
            width: 1.2rem;
            margin: 0.5rem 0 0.8rem 0.75rem;
        }

        .text-gradient {
            margin-left: 0.75rem;
            display: inline-block;
            color: #0fa7f8;
            font-size: 1.2rem;
            line-height: 1.2rem;
            font-weight: 500;

            background: -moz-linear-gradient( -60deg, #0fa7f8, #1569C8, #1569C8);
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#0fa7f8), color-stop(0.7, #1569C8), to(#1569C8));
            background: -o-linear-gradient(-60deg, #0fa7f8, #1569C8, #1569C8);

            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text-gradient1, .text-gradient2 {
            font-size: 0.7rem;
            line-height: 0.7rem;
            color: #666;
        }

        .text-gradient1 {
            margin: 0.75rem 0 0 0.75rem;
        }

        .text-gradient2 {
            margin: 0.25rem 0 0 0.75rem;
        }

        .phone-text {
            font-size: 0.7rem;
            line-height: 2.25rem;
            color: #333;
            display: inline-block;
        }

        .data-item, .data-item1, .data-item2 {
            border: 1px solid #edecef;
            background-color: #edecef;
            box-sizing: border-box;
            height: 2.25rem;
            margin: 0 0.75rem;
            margin-top: 1.6rem;
            padding: 0 0.75rem;
            border-radius: 0.3rem;
            position: relative;
        }

        .data-item1 {
            border: none;
            background-color: transparent;
            margin-top: 0.5rem;
            padding: 0;
        }

        .data-item2 {
            width: 11rem;
            height: 2.25rem;
            margin-top: 0;
            margin: 0;
            float: left;
        }

        .data-item3, .data-item4, .data-item3-on, .data-item4-on {
            height: 2.25rem;
            position: absolute;
            display: inline-block;
            background: -webkit-linear-gradient(-60deg, #0fa7f8 20%, #1569C8 80%, #1569C8);
            color: #fff;
            font-size: 0.7rem;
            line-height: 2.25rem;
            text-align: center;
            border: 1px solid #fff;
            border-radius: 0.3rem;
            right: 0;
            width: auto;
            margin-left: 0.5rem;
        }

        .data-item3, .data-item3-on {
            width: 5.75rem;
        }

        .data-item4, .data-item4-on {
            width: 17.25rem;
            margin: 1rem 0.75rem;
        }

        input[class="phone-input"] {
            display: inline-block;
            width: 70%;
            height: 100%;
            font-size: 0.7rem;
        }

        input[class="phonecode-input"] {
            display: inline-block;
            width: 60%;
            height: 100%;
            font-size: 0.7rem;
        }

        .data-item3-on, .data-item4-on {
            background: #cecece;
        }
    </style>
</head>
<body class="init">
<div class="top">
    <img src="../../image/setting_more@2x.png" alt="" class="goreturn" onclick="javascript :history.go(-1);">
</div>
<h2 class="text-gradient" data-text="手机登录">手机登录</h2>
<h3 class="text-gradient1" data-text="手机登录">请输入您的手机号</h3>
<h3 class="text-gradient2" data-text="手机登录">直接注册/登录您的个人账号</h3>
<div class="data-item">
    <span class="phone-text">手机号码</span>
    <input type="number" placeholder="请输入手机号码" class="phone-input" oninput="if(value.length>11)value=value.slice(0,11)"
           id="phone"/>
</div>
<div class="data-item1">
    <div class="data-item2">
        <span class="phone-text">验证码</span>
        <input type="number" placeholder="请输入验证码" class="phonecode-input"
               oninput="if(value.length>6)value=value.slice(0,6)" id="phonecode"/>
    </div>
    <button class="data-item3" onclick="getSMS()" id="codebut">
        获取验证码
    </button>
</div>
<button class="data-item4" onclick="login()" id="loginbtn">
    确定
</button>
</body>
<script type="text/javascript" src="../../jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script>

  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        console.log(clientWidth)
        docEl.style.fontSize = 40 * (clientWidth / 750) + 'px';

      };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

  //获取url中的参数
  function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
  }

  var headers = {
      "appVersion": getUrlParam("appVersion"),
      "os": getUrlParam("systemType"),
      "osVersion": getUrlParam("systemVersion")
    }


  var phone = document.getElementById("phone")
  var phonecode = document.getElementById("phonecode")
  var codebut = document.getElementById("codebut")
  var loginbtn = document.getElementById("loginbtn")

  function getSMS() {

    if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone.value))) {
      Toast("请填写正确的手机号", 2000)
      return false;
    }

    codebut.innerText = "正在发送"
    codebut.className = "data-item3-on"
    codebut.disabled = true


    $.ajax({
      url: orginlink+"/user/sendSMS",
      type: 'POST',
      data:JSON.stringify({
        identifier: phone.value,
        identityType: 1
      }),
      headers: headers,
      contentType: "application/json",
      dataType: 'json',
      success: function (data) {
        if (data.msg == "success") {
          Toast("发送成功", 2000)
          var nbr = 60
          codebut.className = "data-item3-on"
          codebut.innerText = nbr + "s"
          var ti = setInterval(function () {
            nbr--
            if (nbr == 0) {
              codebut.className = "data-item3"
              codebut.innerText = "获取验证码"
              codebut.disabled = false
              clearInterval(ti);
            } else {
              codebut.innerText = nbr + "s"
            }
          }, 1000)
        } else {
          Toast("发送失败", 2000);
          codebut.className = "data-item3"
          codebut.innerText = "获取验证码"
          codebut.disabled = false
        }
      }});

  }

  function login() {

    loginbtn.className = "data-item4-on"
    loginbtn.disabled = true
    var phone1 = phone.value

    if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone1))) {
      Toast("请填写正确的手机号", 2000)
      loginbtn.className = "data-item4"
      loginbtn.disabled = false
      return false;
    }
    if (!(/^\d{6}$/.test(phonecode.value))) {
      Toast("请填写正确的验证码", 2000)
      loginbtn.className = "data-item4"
      loginbtn.disabled = false
      return false;
    }

    $.ajax({
      url: orginlink+"/user/login",
      type: 'POST',
      data:JSON.stringify({
        identifier: phone1,
        code: phonecode.value,
        identityType: 1
      }),
      headers: headers,
      contentType: "application/json",
      dataType: 'json',
      success: function (data) {
        console.log(data)
        if (data.code == 0) {
          Toast("登录成功", 2000)
          loginbtn.className = "data-item4"
          history.go(-1);
          localStorage.isLogin = 1;
          localStorage.phone = phone1;
          console.log($api.getStorage("phone"))
        } else {
          localStorage.isLogin = 0;
          Toast("验证码错误", 2000)
          loginbtn.className = "data-item4"
        }
        loginbtn.className = "data-item4"
        loginbtn.disabled = false
      }
    });
  }

  //自定义弹框
  function Toast(msg, duration) {
    duration = isNaN(duration) ? 3000 : duration;
    var m = document.createElement('div');
    m.innerHTML = msg;
    m.style.cssText = "width: 60%;min-width: 3.75rem;opacity: 0.7;height: 2rem;color: rgb(255, 255, 255);line-height: 2rem;text-align: center;border-radius: 5px;position: fixed;top: 40%;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
    document.body.appendChild(m);
    setTimeout(function () {
      var d = 0.5;
      m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
      m.style.opacity = '0';
      setTimeout(function () {
        document.body.removeChild(m)
      }, d * 1000);
    }, duration);
  }
</script>
</html>
